import type { ComponentStyleIdType } from '../../types/interfaces'
import type { DescriptionItem, DescriptionListProps } from './types'
import { UIComponent } from '../../lib/abstract'
import { ToolKit } from '../../lib/utils/toolkit'
import { ComponentStyleId } from '../../types/constants'
import { styles } from './styles'
import { DEFAULT_DESCRIPTION_LIST_PROPS } from './types'

/**
 * 描述列表组件
 * 提供美观、可定制的键值对展示方式
 */
export class DescriptionList extends UIComponent<DescriptionListProps> {
  id: string = 'description-list'
  readonly description: string = '描述列表组件'
  readonly styleId: string = ComponentStyleId[this.name]
  private items: DescriptionItem[] = []

  get name(): ComponentStyleIdType {
    return 'DescriptionList'
  }

  get className(): string {
    const { layout, className } = this.props
    return [
      'description-list',
      `description-list-${layout}`,
      className || '',
    ].filter(Boolean).join(' ')
  }

  constructor(props: DescriptionListProps) {
    super({
      ...DEFAULT_DESCRIPTION_LIST_PROPS,
      ...props,
    })
    this.items = props.items || []

    // 注册样式
    this.registerStyles()
  }

  ELEMENT_SELECTORS = {

  }

  /**
   * 渲染组件HTML
   * @returns 生成的HTML字符串
   */
  render(): string {
    const { title, style } = this.props
    const containerStyle = style ? ToolKit.ui.style.styleToString(style) : ''

    return `
      <div class="${this.className}" style="${containerStyle}">
        ${title ? `<div class="description-list-title">${title}</div>` : ''}
        ${this.items.map(item => this.renderItem(item)).join('')}
      </div>
    `
  }

  /**
   * 渲染单个描述项
   * @param item 描述项配置
   * @returns 单个描述项的HTML字符串
   */
  private renderItem(item: DescriptionItem): string {
    const content = typeof item.content === 'string' ? item.content : item.content.outerHTML
    const highlightClass = item.highlight ? 'description-item-highlight' : ''
    const iconHtml = item.icon ? `<span class="description-item-icon">${item.icon}</span>` : ''
    const colonClass = item.colon !== false ? 'has-colon' : ''
    const itemStyle = item.style ? ToolKit.ui.style.styleToString(item.style) : ''

    return `
      <div class="description-item ${highlightClass} ${item.className || ''}" style="${itemStyle}">
        <div class="description-item-label ${colonClass}">
          ${iconHtml}
          <span>${item.label}</span>
        </div>
        <div class="description-item-content">
          ${content}
        </div>
      </div>
    `
  }

  /**
   * 添加描述项
   * @param item 描述项配置
   * @returns 当前实例，支持链式调用
   */
  public addItem(item: DescriptionItem): this {
    this.items.push(item)
    return this
  }

  /**
   * 批量添加描述项
   * @param items 描述项数组
   * @returns 当前实例，支持链式调用
   */
  public addItems(items: DescriptionItem[]): this {
    this.items.push(...items)
    return this
  }

  getStyles(): string {
    const { themeColor, labelAlign, contentAlign, divider } = this.props

    return styles(
      themeColor,
      labelAlign,
      contentAlign,
      divider,
    )
  }

  /**
   * 销毁组件
   */
  destroy(): void {
    super.destroy()
  }
}
